<template>
  <div class="xiaoxi-container">
    <!-- 自定义顶部导航栏 -->
    <div class="chat-header">
      <img class="back-icon" src="/static/MyImage/arrow-right.png" @click="goBack" />
      <img class="doctor-avatar" src="/static/MyImage/avatar.jpg" />
      <span class="doctor-name">医生姓名</span>
      <img class="phone-icon" src="/static/MyImage/address.png" />
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-content">
      <!-- 医生消息 -->
      <div class="message-item doctor-message">
        <img class="message-avatar" src="/static/MyImage/avatar.jpg" />
        <div class="message-bubble doctor-bubble">您好！我是XX科医生XX，有什么可以帮到您的？</div>
      </div>

      <!-- 用户消息 -->
      <div class="message-item user-message">
        <div class="message-bubble user-bubble">我阳了</div>
        <div class="message-status"></div>
      </div>

      <!-- 医生消息 -->
      <div class="message-item doctor-message">
        <img class="message-avatar" src="/static/MyImage/avatar.jpg" />
        <div class="message-bubble doctor-bubble">你想听好消息还是坏消息？</div>
      </div>

      <!-- 用户消息 -->
      <div class="message-item user-message">
        <div class="message-bubble user-bubble">？？？？？</div>
        <div class="message-status"></div>
      </div>
    </div>

    <!-- 底部输入区域 -->
    <div class="input-area">
      <input class="message-input" placeholder="输入消息" v-model="messageText" />
      <button class="send-btn" @click="sendMessage">
        <img class="send-icon" src="/static/MyImage/arrow-right.png" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const messageText = ref('')
const safeAreaTop = ref(0)

onMounted(() => {
  let safeAreaInsets
  if (uni.getWindowInfo) {
    safeAreaInsets = uni.getWindowInfo().safeAreaInsets
  } else {
    safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
  }
  safeAreaTop.value = safeAreaInsets?.top || 0
})

function goBack() {
  uni.navigateBack()
}

function sendMessage() {
  if (messageText.value.trim()) {
    // 发送消息逻辑
    console.log('发送消息:', messageText.value)
    messageText.value = ''
  }
}
</script>

<style lang="scss" scoped>
.xiaoxi-container {
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.chat-header {
  display: flex;
  align-items: center;
  background: #e6f7e6;
  padding: 12px 16px;
  padding-top: calc(20px + v-bind(safeAreaTop + 'px'));
  padding-bottom: 20px;
  min-height: calc(80px + v-bind(safeAreaTop + 'px'));
  box-shadow: 0 2px 8px 0 #e6f7e6;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  transform: rotate(180deg);
  cursor: pointer;
}

.doctor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #3ec99e;
  margin-right: 12px;
  object-fit: cover;
}

.doctor-name {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
  color: #222;
}

.phone-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.chat-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.doctor-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #3ec99e;
  margin-right: 8px;
  object-fit: cover;
}

.message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
}

.doctor-bubble {
  background: #fff;
  color: #222;
  border-bottom-left-radius: 4px;
}

.user-bubble {
  background: #3ec99e;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message-status {
  width: 8px;
  height: 8px;
  background: #3ec99e;
  border-radius: 50%;
  margin-left: 8px;
  margin-top: 8px;
}

.input-area {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  gap: 12px;
}

.message-input {
  flex: 1;
  border: none;
  outline: none;
  background: #fff;
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 16px;
  box-shadow: 0 2px 8px 0 #e6f7e6;
  
  &::placeholder {
    color: #999;
  }
}

.send-btn {
  width: 40px;
  height: 40px;
  background: #3ec99e;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  
  &:hover {
    background: #00b97b;
  }
}

.send-icon {
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  filter: brightness(0) invert(1);
}
</style>